<%@page import="com.mysql.fabric.xmlrpc.base.Data"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
<style type="text/css">
.main_div{
	margin : 15px;
}
</style>
</head>
<body>
	<div class="main_div">
		<form id="from_add" class="layui-form layui-form-pane" action="">
		  <input type="hidden" id="id" name="id">
		  <div class="layui-form-item">
		    <label class="layui-form-label">角色名</label>
		    <div class="layui-input-inline">
		      <input type="text" id="name" name="name"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">代号</label>
		    <div class="layui-input-inline">
		      <input type="text" id="sn" name="sn"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
			<label class="layui-form-label">权限</label>
			<div class="layui-input-block" id="permissions" name="permissions">
	      </div>
		  </div>       
		  
		</form>
		   <button class="layui-btn"  onclick="submitForm()">修改</button> 
	</div>
	
	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script type="text/javascript">
	 	/* layui.use('layer', function(){
		 var layer = layui.layer;
	 	}); */
	  layui.config({
	    base : '${ctx}/static/lib/'
	  }).extend({
	    selectM: './layui_extends/selectM',
	  }).use(['layer','form','selectM','upload'],function(){
	    $ = layui.jquery;	
	    var form = layui.form;
	    var upload = layui.upload;
	    var selectM = layui.selectM;
	
		$.ajax({
			url : "${ctx}/role/selectRoleAndPermission.action",
			type : "POST",
			//${param.roleId} == request.getParam("roleId") 
			//直接在list页面的roleId在这拿出来
			data : {"roleId" : "${param.roleId}"},
			dataType : "json",
			success : function(resp){
				if(resp.code == util.SUCCESS){
					/* mylayer.success(resp.msg); */
					
					var role = resp.data["role"];//map拿到role数据
					var allPermissions = resp.data["permissions"];//map拿到permission权限数据
					console.log(allPermissions);
					//[1,2,3,]
					var selectIds = resp.data["selectIds"]; //默认显示的，map拿到selectIds
					console.log(selectIds);
					$("#id").val(role.id);
					$("#name").val(role.name);
					$("#sn").val(role.sn);
					
					//多选标签-所有配置
				    var tagIns2 = selectM({
				      //元素容器【必填】
				      elem: '#permissions'
				      
				      //候选数据【必填】
				      ,data: allPermissions
				      
				      //默认值
				      ,selected: selectIds	
				      
				      //最多选中个数，默认5
						,max : 100
				    });
				} else {
					mylayer.errorMsg(resp.msg);
				}
			}
		});
	  });
	 	
 	//ajax提交表单
	function submitForm(){
 		
		$.ajax({
			url : "${ctx}/role/update.action",
			data : $('#from_add').serialize(),
			type : "post",
			dataType : "json",	
			success : function(resp){
				if(resp.code == util.SUCCESS){
					mylayer.confirm("修改成功，是否跳转到角色管理界面?","${ctx}/role/getRolePage.action");
				} else {
					mylayer.errorMsg(resp.msg);
				}
			}
			
		});
	}   	
	</script>
	
</body>
</html>